<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #timeDisplay {
            font-size: 24px;
            margin: 50px;
        }
        table {
            border-collapse: collapse;
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="timeDisplay"></div>
    <table>
        <tr><!--  第一行 -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr><!--  第二行 -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr><!--  第三行 -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr><!--  第四行 -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <script>
        function updateTime() {
            const now = new Date();
            document.getElementById('timeDisplay').innerText = now.toLocaleTimeString();
        }

        function changeColors() {
            var tds = document.getElementsByTagName('td');
            var colors = ['red', 'pink', 'green', 'blue', 'black', 'yellow', 'purple'];
            for (var i = 0; i < tds.length; i++) {
                tds[i].style.backgroundColor = colors[Math.floor(Math.random() * 7)];
            }
        }

        window.onload = function() {
            // 更新时间
            updateTime();
            setInterval(updateTime, 1000);

            // 每秒改变颜色
            changeColors();
            setInterval(changeColors, 5000);
        };
    </script>
</body>
</html>